<template>
  <view class="container">
    <!-- 协议头部 -->
    <view class="agreement-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">青理乐送</text>
      <text class="subtitle">用户协议</text>
    </view>

    <!-- 协议内容 -->
    <scroll-view class="agreement-content" scroll-y>
      <view class="content-container">
        <view class="section">
          <text class="section-title">1. 服务说明</text>
          <text class="section-text">我们提供校园内餐饮订购及配送服务，配送范围仅限青岛理工大学临沂校区（具体以地图标注为准）。</text>
        </view>

        <view class="section">
          <text class="section-title">2. 账号与订单</text>
          <text class="section-text">登录需微信授权，并绑定手机号用于接收取餐通知</text>
          <view class="rules-container">
            <view class="rule-item">
              <text class="rule-icon">✅</text>
              <text class="rule-text">商户接单后原则上不可取消（备餐快易浪费）</text>
            </view>
            <view class="rule-item">
              <text class="rule-icon">✅</text>
              <text class="rule-text">若餐品有问题，请于收到后15分钟内联系商家处理</text>
            </view>
          </view>
        </view>

        <view class="section">
          <text class="section-title">3. 用户义务</text>
          <text class="section-text">提供准确的宿舍楼/取餐点信息（如"A栋201"）</text>
          <text class="section-text">不得利用平台从事二手转卖等非餐饮交易</text>
        </view>

        <view class="section">
          <text class="section-title">4. 免责条款</text>
          <view class="warning-container">
            <view class="warning-item">
              <text class="warning-icon">⚠️</text>
              <text class="warning-text">用户填错地址导致配送失败</text>
            </view>
            <view class="warning-item">
              <text class="warning-icon">⚠️</text>
              <text class="warning-text">校园活动封路等不可抗力</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="agree-btn" @click="goBack">同意并返回</button>
    </view>
  </view>
</template>

<script setup>

const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #fff8f8 0%, #fff5f7 50%, #fff8fa 100%);
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
}

.agreement-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;

  .logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    border-radius: 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.2);
  }

  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    letter-spacing: 2rpx;
  }

  .subtitle {
    font-size: 32rpx;
    color: #666;
    letter-spacing: 1rpx;
  }
}

.agreement-content {
  flex: 1;
  margin-bottom: 40rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .content-container {
    padding: 20rpx;
  }

  .section {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }

    .section-text {
      display: block;
      font-size: 28rpx;
      line-height: 1.6;
      color: #666;
      margin-bottom: 10rpx;
    }
  }

  .rules-container {
    margin: 20rpx 0;
    padding-left: 40rpx;

    .rule-item {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .rule-icon {
        margin-right: 10rpx;
        color: #07c160;
      }

      .rule-text {
        font-size: 28rpx;
        line-height: 1.5;
        color: #666;
      }
    }
  }

  .warning-container {
    margin: 20rpx 0;
    padding-left: 40rpx;

    .warning-item {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .warning-icon {
        margin-right: 10rpx;
        color: #ff6b6b;
      }

      .warning-text {
        font-size: 28rpx;
        line-height: 1.5;
        color: #666;
      }
    }
  }
}

.footer {
  .agree-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
    color: #fff;
    border-radius: 45rpx;
    font-size: 32rpx;
    font-weight: 500;
    box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.2);
    border: none;

    &:active {
      background: linear-gradient(135deg, #ff8a8e 0%, #ff5b5b 100%);
    }
  }
}
</style>